<div style="margin-top:45px;" v-if="status">

  <!-- 图标 -->
  <a-alert v-if="!status.connect"
    message="警告"
    description="屏幕掉线啦！！！"
    type="warning"
    showIcon
  ></a-alert>

  <a-card style="padding: 12px;">
    <a-form>
      <a-form-item :label-col="{span : 4}" :wrapperCol="{span: 18}" label="查询方式" style="margin-bottom: 1px;">
        <a-select :value="method" @change="(v) => onMethodChange(v)">
          <template v-for="m in optMethods">
            <a-select-option :value="m.key" :key="m.key">{{m.name}}</a-select-option>
          </template>
        </a-select>
      </a-form-item>

      <template v-for="vItem in values">
        <a-form-item label="页码" v-if="vItem.ruleName=='page'"
            style="margin-bottom: 1px;" :label-col="{span : 4}" :wrapperCol="{span: 18}">
          <a-form-item :style="{display: 'inline-block', width: 'calc(50% - 12px)', marginBottom: '1px'}">
            <a-input-number v-model.number="vItem.page" style="width: 100%" @change="(v) => onChange(v, vItem, 'page')" :min=1 />
          </a-form-item>
          <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }">/</span>
          <a-select :style="{display: 'inline-block', width: 'calc(50% - 12px)', marginBottom: '1px'}"
              v-model.number="vItem.pageSize" @change="(v) => onChange(v, vItem, 'pageSize')">
            <a-select-option :value="10" key="10">每页显示 10 条</a-select-option>
            <a-select-option :value="20" key="20">每页显示 20 条</a-select-option>
            <a-select-option :value="30" key="30">每页显示 30 条</a-select-option>
            <a-select-option :value="40" key="40">每页显示 40 条</a-select-option>
            <a-select-option :value="50" key="50">每页显示 50 条</a-select-option>
            <a-select-option :value="60" key="60">每页显示 60 条</a-select-option>
            <a-select-option :value="70" key="70">每页显示 70 条</a-select-option>
            <a-select-option :value="80" key="80">每页显示 80 条</a-select-option>
            <a-select-option :value="90" key="90">每页显示 90 条</a-select-option>
            <a-select-option :value="100" key="100">每页显示 100 条</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item :label="vItem.title" v-else-if="vItem.ruleName=='checkbox'"
            style="margin-bottom: 1px;" :label-col="{span : 4}" :wrapperCol="{span: 18}">
          <div :style="{ borderBottom: '1px solid #E9E9E9', marginBottom: '1px' }">
            <a-checkbox :indeterminate="vItem.indeterminate" :checked="vItem.checkAll" @change="(v) => onChange(v, vItem, 'checkAll')">
              全选
            </a-checkbox>
          </div>
          <a-checkbox-group v-model="vItem.values" @change="(v) => onChange(v, vItem, null)">
            <a-row>
              <a-col :span="6" v-for="opt in vItem.options" :key="opt.key">
                <a-checkbox :value="opt.key">{{opt.name}}</a-checkbox>
              </a-col>
            </a-row>
          </a-checkbox-group>
        </a-form-item>

        <a-form-item :label="vItem.title" v-else-if="vItem.ruleName=='select'"
            style="margin-bottom: 1px;" :label-col="{span : 4}" :wrapperCol="{span: 18}">
          <a-select v-model="vItem.value" @change="(v) => onChange(v, vItem, null)"
              :label-col="{span : 4}" :wrapperCol="{span: 18}">
            <a-select-option v-for="opt in vItem.options" :value="opt.key" :key="opt.key">{{opt.name}}</a-select-option>
          </a-select>
        </a-form-item>
        
        <a-form-item label="年份范围" v-else-if="vItem.ruleName=='yearRange'"
            :label-col="{span: 4}" :wrapperCol="{span: 18}" style="margin-bottom: 1px;">
          <a-select v-model="vItem.from" @change="(v) => onChange(v, vItem, 'from')"
              :style="{display: 'inline-block', width: 'calc(50% - 12px)', marginBottom: '1px'}">
            <a-select-option :value="fromOpt" :key="fromOpt" v-for="fromOpt in vItem.fromOpts">{{ fromOpt }}</a-select-option>
          </a-select>
          <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }">-</span>
          <a-select v-model="vItem.to" @change="(v) => onChange(v, vItem, 'to')"
              :style="{display: 'inline-block', width: 'calc(50% - 12px)', marginBottom: '1px'}">
            <a-select-option :value="toOpt" :key="toOpt" v-for="toOpt in vItem.toOpts">{{ toOpt }}</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item :label="vItem.title" v-else-if="vItem.ruleName=='textMatch'"
            style="margin-bottom: 1px;" :label-col="{span : 4}" :wrapperCol="{span: 18}">
          <a-select :style="{display: 'inline-block', width: 'calc(30% - 12px)', marginBottom: '1px'}"
              v-model="vItem.type" @change="(v) => onChange(v, vItem, 'type')">
            <a-select-option value="contain" key="contain">包含文本</a-select-option>
            <a-select-option value="not" key="not">不包含文本</a-select-option>
            <a-select-option value="prefix" key="prefix">开头匹配文本</a-select-option>
            <a-select-option value="suffix" key="suffix">结尾匹配文本</a-select-option>
            <a-select-option value="regex" key="regex">匹配正则表达式</a-select-option>
          </a-select>
          <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }">:</span>
          <a-form-item :style="{display: 'inline-block', width: 'calc(70% - 12px)', marginBottom: '1px'}">
            <!-- DO NOT TRIM !!! -->
            <a-input v-model="vItem.value" style="width: 100%" @change="(v) => onChange(v, vItem, 'value')"
              :placeholder="vItem.type=='regex'?'^example$':''" />
          </a-form-item>
        </a-form-item>
      </template>

      <a-form-item :wrapperCol="{span: 16, offset: 4}" style="margin-bottom: 1px;">
        <a-button-group>
          <a-button @click="btnSubmit()" :type="dirty ? 'primary' : 'default'" >提交</a-button>
          <a-button @click="btnRefresh()">刷新</a-button>
        </a-button-group>
      </a-form-item>
    </a-form>
  </a-card>
  
  <br/>
  <a-card v-if="status.data && status.data.view">
    画报大小: {{ status.data.view.width }} x {{ status.data.view.height }}
  </a-card>
</div>
<div v-else>
  空
</div>
